<template>
  <div class="tab_scroll_holder">
    <div class="tab_scroll" ref="tabScroll">
      <ul :style="{width:totalWidth+'px'}" class="tab" id="tabBottom">
        <li
          ref="tabli"
          @click="tabEvent(index)"
          :style="{width:itemWidth+'px'}"
          :key="index"
          v-for="(item,index) in data"
          :data-type="item.type"
          class="on"
        >
          <span>{{item.name}}</span>
        </li>
        <div style="clear:both"></div>
      </ul>
    </div>
  </div>
</template>

<script>
import IScroll from "iscroll";
export default {
  name: "tab_scroll",
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    tabEvent(index) {
      let objs = this.$refs.tabli;
      console.log(objs[index]);
      this.tabScroll.scrollToElement(objs[index], 400, true, true);
    },
    initTabScroll() {
      var viewportWidth = document.documentElement.clientWidth;
      console.log(viewportWidth);
      this.itemWidth = viewportWidth / 4.5;
      this.totalWidth = this.data.length * this.itemWidth;
      // this.tabScroll = new IScroll(this.$refs.tabScroll, {
      //   mouseWheel: true,
      //   scrollbars: true
      // });

      // setTimeout(() => {
      //   this.tabScroll.refresh();
      // }, 0);
    }
  },
  data() {
    return {
      itemWidth: 0,
      totalWidth: 0
    };
  },
  watch: {
    data(newval, oldval) {
      if (newval != oldval) {
        console.log(newval);
        this.initTabScroll();
      }
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/styles/global";
.tab_scroll_holder {
  overflow: hidden;
  .tab_scroll {
    .tab {
      position: relative;
      overflow: hidden;
      border-bottom: 0.5px #e4e4e4 solid;
      background-color: #fff;
      margin-bottom: 8px;
      li {
        float: left;
        text-align: center;
        overflow: hidden;
        span {
          display: inline-block;
          line-height: 38px;
          height: 38px;
          border-bottom: 3px transparent solid;
          font-size: 15px;
        }
      }
    }
  }
}
</style>
